<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>新增菜品</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="lib/dropify/css/dropify.min.css">
</head>
<body>

<div class="container-fluid">

    <div class="app-title">
        <div>
            <h1><i class="fa fa-circle-o"></i> 新增菜品</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><a href="welcome.html">首页</a></li>
            <li class="breadcrumb-item"><a href="dishes_list.html">菜品管理</a></li>
            <li class="breadcrumb-item active">新增菜品</li>
        </ul>
    </div>

    <div class="tile">

        <form id="form" action="" method="post">
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label class="control-label">菜品标题</label>
                    <input class="form-control" type="text" name="title" required>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label class="control-label">菜品价格</label>
                    <input class="form-control" type="text" name="price" required>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label class="control-label">菜品图片</label>
                    <input type="hidden" name="image" value="">
                    <div class="text-center dropzone" id="imgDropzone">
                        <div class="dz-message">
                            Drop files here or click to upload<br>
                            <small class="text-info">(将文件放到此处或单击以上传)</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label class="control-label">菜品状态</label>
                    <div>
                        <div class="animated-radio-button form-check-inline">
                            <label>
                                <input type="radio" name="status" value="1" checked>
                                <span class="label-text">正常</span>
                            </label>
                        </div>
                        <div class="animated-radio-button form-check-inline">
                            <label>
                                <input type="radio" name="status" value="2">
                                <span class="label-text">售罄</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label class="control-label">菜品分类</label>
                    <select class="form-control" name="cid" required>
                        <option value="">-- 选择分类 --</option>
                        <option value="1">火锅</option>
                        <option value="2">凉菜</option>
                        <option value="3">小炒</option>
                        <option value="4">田园时蔬</option>
                        <option value="5">酒水</option>
                    </select>
                </div>
            </div>
            <hr>
            <div class="form-group">
                <button class="btn btn-primary" type="submit">
                    <i class="fa fa-fw fa-lg fa-check-circle"></i>保存
                </button>
                &nbsp;&nbsp;
                <a class="btn btn-secondary" href="javascript:history.back()">
                    <i class="fa fa-fw fa-lg fa-times-circle"></i>取消
                </a>
            </div>
        </form>

    </div>
    <!-- /.tile -->
</div>
<!-- /.container-fluid -->

<!-- Essential javascripts for application to work-->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<!-- Page specific javascripts-->
<script src="js/plugins/jquery.validate.min.js"></script>
<script src="js/plugins/select2.min.js"></script>
<script src="js/plugins/dropzone.js"></script>
<script src="lib/layer/layer.js"></script>
<script>
    $("select").select2();

    let $form = $("#form");
    // 验证表单
    $form.validate();

    // 上传图片// Disabling autoDiscover, otherwise Dropzone will try to attach twice.
    Dropzone.autoDiscover = false;
    // Dropzone class:
    let imgDropzone = new Dropzone("#imgDropzone", {
        url: "/file-upload", // 上传服务器URL
        paramName: "file", // 上传文件的参数名
        maxFiles: 1, // 最大文件数量
        maxFilesize: 2, // 最大文件大小, 单位MB
        acceptedFiles: "image/*", // 允许上传的文件类型
        addRemoveLinks: true, // 显示删除按钮
    });
    // 上传成功回调
    imgDropzone.on("success", function (file, response) {
        if (response.state === 1) {
            $form.find("[name=image]").val(response.data);
        } else {
            layer.msg(response.message);
        }
    });
    // 超出最大上传数量回调
    imgDropzone.on("maxfilesexceeded", function (file) {
        this.removeFile(file);
        layer.msg("超出最大上传数量限制~");
    });
</script>

</body>
</html>